<template>
  <div class="qualificationTab">
    <el-dialog
      class="lintTab"
      title="已分配的产品线"
      :visible.sync="dialogVisible"
      width="200px">
      <ul class="lineDetail">
        <li>水泥骨</li>
        <li>心脏支架</li>
        <li>心脏支架</li>
        <li>心脏支架</li>
        <li>心脏支架</li>
        <li>心脏支架</li>
      </ul>
    </el-dialog>
    <el-dialog
      title="交换过程"
      width="977px"
      :visible.sync="changeDetailVisible">
      <el-table
        :data="exchangeData"
        stripe
        style="width: 100%;">
        <el-table-column
          type="index"
          label="序号"
          width="56"/>
        <el-table-column
          prop="status"
          label="角色"
          width="80"/>
        <el-table-column
          prop="name"
          label="受邀方"
          width="288"/>
        <el-table-column
          prop="updatedBy"
          label="用户"
          width="80"/>
        <el-table-column
          prop="step"
          label="交换过程"
          width="80"/>
        <el-table-column
          prop="createdAt"
          label="日期"
          width="168"/>
        <el-table-column
          prop="oldDocumentCode"
          label="备注"
          width="182"/>
      </el-table>
    </el-dialog>

    <el-table
      v-loading="loading"
      :data="tableData"
      stripe
      style="width: 100%;">
      <el-table-column
        type="index"
        label="序号"
        width="56"/>
      <el-table-column
        prop="inviter"
        label="邀请方"
        width="200"/>
      <el-table-column
        prop="invited"
        label="受邀方"
        width="200"/>
      <el-table-column
        prop="city"
        label="交汇方式"
        width="90">
        <template slot-scope="scope">
          <el-button
            @click.native="handleClick(scope.row)"
            type="text"
            size="small">查看明细
          </el-button>
        </template>
      </el-table-column>
      <el-table-column
        prop="updatedBy"
        label="负责人"
        width="90"/>
      <el-table-column
        label="产品线"
        width="80">
        <template slot-scope="scope">
          <el-button
            @click.native="showLine(scope.row)"
            type="text"
            size="small">查看明细
          </el-button>
        </template>
      </el-table-column>
      <el-table-column
        prop="documentCode"
        label="单据编号"
        width="150"/>
      <el-table-column
        prop="createdAt"
        label="创建时间"
        width="150"/>
      <el-table-column
        prop="documentStatus"
        label="单据状态"
        width="120">
        <template slot-scope="scope">
          <p
            :class='statusClass(scope.row.documentStatus)'
            class="statusPoint">
            <span/>
            {{ scope.row.documentStatus | status }}
          </p>
        </template>
      </el-table-column>
      <el-table-column
        label="交换过程"
        width="120">
        <template slot-scope="scope">
          <el-button
            @click.native="showExchangeDetail(scope.row)"
            type="text"
            size="small">查看过程
          </el-button>
        </template>
      </el-table-column>
      <el-table-column
        prop="oldDocumentCode"
        label="原订单"
        width="150"/>
      <el-table-column
        prop="updatedBy"
        label="操作用户"/>
      <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button
            @click="handleClick(scope.row)"
            type="text"
            size="small">查看
          </el-button>
          <el-button
            type="text"
            size="small"
            @click="handleClick(scope.row)"
            style="color:#d85365;">编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'QualificationTab',
  data () {
    return {
      tableData: [
        {
          id: '123',
          inviter: '国科恒泰（北京）医疗科技股份有限公司',
          invited: '江西世海贸易有限公司',
          documentStatus: 0,
          documentCode: 'SYJH20190402001',
          createdAt: '2019-04-02 13:12:12',
          categoryId: '4396',
          updatedBy: '张三',
          oldDocumentCode: 'SYJH20190402002'
        },
        {
          id: '123',
          inviter: '国科恒泰（北京）医疗科技股份有限公司',
          invited: '江西世海贸易有限公司',
          documentStatus: 1,
          documentCode: 'SYJH20190402001',
          createdAt: '2019-04-02 13:12:12',
          categoryId: '4399',
          updatedBy: '张三',
          oldDocumentCode: 'SYJH20190402005'
        },
        {
          id: '123',
          inviter: '国科恒泰（北京）医疗科技股份有限公司',
          invited: '江西世海贸易有限公司',
          documentStatus: 2,
          documentCode: 'SYJH20190402001',
          createdAt: '2019-04-02 13:12:12',
          categoryId: '4781',
          updatedBy: '张三',
          oldDocumentCode: 'SYJH20190402008'
        }
      ],
      exchangeData: [
        {
          id: '123',
          status: '邀请方',
          name: '国科恒泰（北京）医疗科技股份有限公司',
          createdAt: '2019-04-02 13:12:12',
          categoryId: '4781',
          updatedBy: '张三',
          oldDocumentCode: 'SYJH20190402008',
          step: '发起'
        },
        {
          id: '123',
          status: '受邀方',
          name: '江西世海贸易有限公司',
          createdAt: '2019-04-02 13:12:12',
          categoryId: '4781',
          updatedBy: '',
          oldDocumentCode: 'SYJH20190402008',
          step: ''
        }
      ],
      dialogVisible: false, // 产品线弹出框
      changeDetailVisible: false // 交换过程详情
    }
  },
  filters: {
    status (e) {
      switch (e) {
        case 0:
          return '草稿'
        case 1:
          return '受邀方处理'
        case 2:
          return '邀请方处理'
        case 3:
          return '已终止'
        case 4:
          return '完成'
        default:
          return '暂无'
      }
    }
  },
  props: {
    loading: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleClick (row) {
      this.$router.push('/qualification/detail')
    },
    handleClose (row) {
    },
    // 展示产品线
    showLine (e) {
      this.dialogVisible = true
    },
    showExchangeDetail (e) {
      this.changeDetailVisible = true
    },
    statusClass (e) {
      switch (e) {
        case 0:
          return 'statusPoint_default'
        case 1:
          return 'statusPoint_success'
        case 2:
          return 'statusPoint_success'
        case 3:
          return 'statusPoint_success'
        case 4:
          return 'statusPoint_stop'
        default:
          return 'statusPoint_success'
      }
    }
  }
}
</script>

<style scoped lang="less">
    @successColor: #49C0AF;
    @stop: #AEB6C3;
    @default: #2371C5;

</style>
